<template>

	<el-row>
		<!-- <el-breadcrumb separator-class="el-icon-arrow-right" :span="24">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>電影管理</el-breadcrumb-item>
			<el-breadcrumb-item>電影列表</el-breadcrumb-item>
		</el-breadcrumb> -->
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item>
				<el-input placeholder="模糊查詢" v-model="str"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="findFilm">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="showDialog()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table
		 	v-loading="loading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
			:data="tableData6.slice((currentPage-1)*pagesize,currentPage*pagesize)"
			style="width: 100%"
			:default-sort = "{prop: 'blan_id', order: 'descending'}">
			<el-table-column
			label="后端语言ID"
			sortable
			prop="blan_id">
			</el-table-column>
			<el-table-column
			label="后端语言名字"
			sortable
			prop="name">
			</el-table-column>
			<el-table-column
			label="后端语言CODE"
			sortable
			prop="code">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
					size="mini" @click="showDialog(scope.$index, scope.row)">编辑</el-button>
					<el-button
					size="mini"
					type="danger"  @click="openDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pageCount"
			style="text-align:center; margin:20px">
		</el-pagination>
		
		<!--遮罩层增加修改-->
		<el-dialog 
            :visible.sync="dialog.show"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :modal-append-to-body="false"
            :title="dialog.title"
            :width="dialog.width">
            <div class="form">
                <el-form >
					<el-row :gutter="20">
					  	<el-col :span="12">
					  		<el-form-item label="语言名字">
		                        <el-input v-model="backLan.name"></el-input>
		                    </el-form-item>
					  	</el-col>
					  	<el-col :span="12">
					  		<el-form-item label="语言CODE">
		                        <el-input v-model="backLan.code"></el-input>
		                    </el-form-item>
					  	</el-col>
					</el-row>

                    <el-form-item  class="text-center" style="padding-top: 20px;">
                        <el-button @click="hideDialog()">取 消</el-button>
                        <el-button @click="saveBackLan()">提  交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!--遮罩层增加修改结束-->
        
	</el-row>

</template>

<script>
	import Qs from 'qs'
	export default {
		props : {
			'dataJson': {
				type: Array
			}
		}
		, 
		data() {
			return {
				loading: true,
				tableData6: [],
				pageCount : 1,
				currentPage:1,
        		pagesize:5,
        		str : "",
        		backLan : {
        			blan_id : "",
        			name : "",
        			code : ""
        		},
        		dialog: {
                    width:'30%',
                    show : false,
                    title: '增加后台语言',
                    formLabelWidth:'120px'
                },
			}
		},
		mounted ($route) {
	 		this.$nextTick(()=>{
 				var _this =  this;
 				let webLanId = {
  					"blan_id": "",
  				}
        		_this.$axios({
                    method: "post",
                  	data:Qs.stringify(webLanId),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Backlanguage/findLanguageById",
                })
                .then(function(res) {
					_this.tableData6 = res.data;
                	_this.loading = false;
                	_this.pageCount = res.data.length
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
 	 		}
 		)},
		methods : {
			handleSizeChange: function (size) {
		        this.pagesize = size;
		    },
		    handleCurrentChange: function(currentPage){
		        this.currentPage = currentPage;
		    },
		    findFilm: function(){
		    	var _this =  this;
		    	_this.tableData6 =[];
		    	_this.loading = true;
		    	let filmAllType = {
  					"str": _this.str,
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmAllType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Backlanguage/findBackLanguageByList",
	  			}).then(function(result){
					_this.tableData6 = result.data;
					_this.pageCount = result.data.length;
					_this.loading = false;
	  			});
		    },
		    openDel(index, row) {
		    	var _this =  this;
		        _this.$confirm('此操作将永久删除这个信息, 是否继续?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	let filmData = {
	  					"id": row.blan_id,
	  				}
			    	_this.$axios({
		  				method:"post",
		  				data:Qs.stringify(filmData),
		  				url:"http://www.qixiaocheng.cn/public/index.php/index/Backlanguage/deleBackLanguagebyId",
		  			}).then(function(result){
		  				let num;
		  				for(let i = 0; i<_this.tableData6.length; i++){
		  					if(_this.tableData6[i].sql_id == row.sql_id){
		  						num = i;
		  					}
		  				}
		  				_this.tableData6.splice(num,1);
		  			});
		  			this.$message({
			            type: 'success',
			            message: '删除成功!'
		          	});
		        }).catch(() => {
		          	this.$message({
			            type: 'info',
			            message: '已取消删除'
		          	});          
		        });
	      	},
	      	saveBackLan(){
	      		var _this =  this;
	      		let SqlLan = {
  					"name": _this.backLan.name,
  					"code" : _this.backLan.code,
  					"blan_id" : _this.backLan.blan_id?_this.backLan.blan_id:""
  				}
	      		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(SqlLan),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Backlanguage/saveLanguageBack",
	  			}).then(function(result){
	  				_this.findFilm();
					_this.dialog.show = false;
	  			});
	      	},
	      	showDialog(index,row){
	      		if(row){
	      			this.dialog.title = "修改后端语言";
	      		}else{
	      			this.dialog.title = "增加后端语言";
	      		}
	      		
       	 		this.backLan = Object.assign({}, row);
				this.dialog.show = true;
	      	},
	      	hideDialog(){
				this.dialog.show = false;
	      	}
		}
	}
</script>

<style scoped>
	.el-breadcrumb{
		margin-bottom: 15px;
	}
	.el-form-item{
		margin: 0px;
	}
	.demo-table-expand {
		font-size: 0;
	}
	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
	.demo-table-expand .el-form-item:last-child {
		margin-right: 0;
		margin-bottom: 0;
		width: 100%;
	}
</style>